<template>
  <div class="er-wei-ma-box">
    <div class="er-wei-ma-content">
      <div class="er-wei-ma-bg">
        <div class="top-prompt">
          {{ codeTxt }}
        </div>
        <img
          :src="codeImg"
          class="code-img"
        >
        <div class="bottom-prompt">
          长按识别二维码{{ codeTxt }}
        </div>
      </div>
      <img
        src="~assets/home/close.png"
        class="close-btn"
        @click="onCloseDialog"
      >
    </div>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({
  props: {
    codeImg: {
      type: String,
      default: '',
    },
    codeTxt: {
      type: String,
      default: '联系客服',
    },
  },
  methods: {
    // 隐藏二维码
    onCloseDialog () {
      this.$emit('hideQrcodePop')
    },
  },
})
</script>

<style lang="scss" scoped>
.er-wei-ma-box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 11111;
  text-align: center;
  background-color: rgba(0,0,0,0.6);
}
.er-wei-ma-content {
  position: absolute;
  top: calc(50% - 380px);
  left: calc(50% - 295px);
}
.er-wei-ma-bg {
  width: 590px;
  height: 660px;
  margin: auto;
  // margin-top: 240px;
  text-align: center;
  border-radius: 3px;
  background-color: #F6F6F6;
}
.top-prompt {
  color: #333;
  font-size: 36px;
  padding-top: 40px;
}
.code-img {
  width: 450px;
  height: 450px;
  margin: 30px 70px;
  box-shadow:0px 0px 27px 0px rgba(0, 0, 0, 0.2)
}
.bottom-prompt {
  color: #666;
  font-size: 28px;
}
.close-btn {
  width: 61px;
  height: 61px;
  color: #fff;
  margin-top: 40px;
}
</style>
